@import "../base/util";
#keyboardContainer{
  display: none;
  .setWH(100%,275px);
  position: absolute;
  bottom: 0;
  left: 0;
  background: #142840;
  .tips{
    .line-height(50px);
    font-size: 18px;
    text-align: center;
    color: #13888b;
  }
  #keyboardSwitch,#keyboardKey{
    width: 600px;
    margin: auto;
    font-size: 0;
  }
  .switch-item{
    display: inline-block;
    margin: 2px;
    .switch-item-wrap{
      font-size: 20px;
      .setWH(112px,50px);
      text-align: center;
      line-height: 50px;
      margin: 2px;
      background-color: #213b5b;
    }
    &.active{
      background-color: #0182e8;
    }
    &.leave{
      color: #0182e8;
      font-weight: bold;
    }
  }
  .keyboard-item{
    display: none;
  }
  #numberKey .key-item{
    display: inline-block;
    margin: 2px;
    .key-item-wrap{
      font-size: 20px;
      .setWH(142px,40px);
      text-align: center;
      line-height: 40px;
      margin: 2px;
      background-color: #213b5b;
    }
    &.active{
      .key-item-wrap{
        background-color: #0182e8;
      }
    }
  }
  #lowercaseKey .key-item,#capitalKey .key-item{
    display: inline-block;
    margin: 2px;
    .key-item-wrap{
      font-size: 20px;
      .setWH(58.5px,40px);
      text-align: center;
      line-height: 40px;
      margin: 2px;
      background-color: #213b5b;
    }
    &.active{
      .key-item-wrap{
        background-color: #0182e8;
      }
    }
  }
  #symbolKey .key-item{
    display: inline-block;
    margin: 2px;
    .key-item-wrap{
      font-size: 20px;
      .setWH(46.5px,40px);
      text-align: center;
      line-height: 40px;
      margin: 2px;
      background-color: #213b5b;
    }
    &.active{
      .key-item-wrap{
        background-color: #0182e8;
      }
    }
  }

}